<template>
  <view class="notify">
    <view class="list-wrap">
      <view class="wrap-goods">
        <view>
          <image class="img-goods" :src="buyingDetail.image"></image>
        </view>
        <view class="txt">
          <text class="txt-goods">{{ buyingDetail.title }}</text>
        </view>
        <view class="txt">
          <text class="price-goods">￥{{ buyingDetail.price }}</text>
        </view>
        <view class="txt-title"> / 图片详情 / </view>
        <view v-html="buyingDetail.content"> </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="add-btn" @tap="confirm">我要联系</button>
    </view>
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>
<script>
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
import { buying } from "@/api/product";
export default {
  components: { rfLoadMore },
  data() {
    return {
      path: "",
      buyingDetail: {},
      img_03: this.$mAssetsPath.img_01,
      loading: true,
      logo: this.$mSettingConfig.appLogo,
    };
  },
  // 每次页面显示 执行该方法
  onLoad(option) {
    this.initData(option);
  },
  methods: {
    // 数据初始化
    initData(option) {
      this.getBuyingList(option.id);
    },
    formatRichText(html) {
      //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        console.log(match.search(/style=/gi));

        if (match.search(/style=/gi) == -1) {
          match = match.replace(/\<img/gi, '<img style=""');
        }
        return match;
      });

      newContent = newContent.replace(
        /style="/gi,
        "$& max-width:100% !important; "
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      return newContent;
    },
    // 获取商品分类列表
    async getBuyingList(id) {
      await this.$http
        .get(`${buying}/${id}`)
        .then(async (res) => {
          console.log(res);
          this.buyingDetail = res.data;
          this.buyingDetail.content = this.formatRichText(this.buyingDetail.content)
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    confirm() {
      uni.makePhoneCall({
        phoneNumber: this.buyingDetail.phone,
        success: function () {},
      });
    },
  },
};
</script>
<style lang="scss">
page {
  background-color: #fff;
}
.notify {
  padding-bottom: 100upx;
  .list-wrap {
    width: 100%;
    padding: 10upx 0 0 0;
    .wrap-goods {
      width: 100%;
      border-bottom: solid 1px #eee;
      .img-goods {
        width: 100%;
      }
      .txt {
        padding-left: 30upx;
        padding-bottom: 24upx;
        .txt-goods {
          font-weight: bold;
          color: #333;
          font-size: 30upx;
          margin: 24upx 0;
        }
        .price-goods {
          font-size: 34upx;
          color: #f91c1c;
          font-weight: bold;
        }
      }
      .txt-title {
        height: 96upx;
        line-height: 96upx;
        text-align: center;
        background: #f9f9f9;
        font-size: 28upx;
        font-weight: bold;
      }
    }
  }
  .btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    .add-btn {
      background: #f91c1c;
      margin: 10upx 30upx;
      border-radius: 40upx;
      color: #fff;
      font-size: 30upx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
}
</style>
